<script setup>
import { useRouter } from 'vue-router'
const router = useRouter()
const HomeGoods = defineModel('HomeGoods')
const handle = () => {
  //根据点击的商品进入商品详情
  router.push('/detail/' + HomeGoods.value.id)
}
</script>
<template>
  <div style="width: 900px; margin: 0 auto">
    <h3 style="font-family: '像素字体'">
      {{ HomeGoods?.name }}
      <a href="#" class="a_total">查看全部>></a>
    </h3>
    <div style="display: flex">
      <el-image :src="HomeGoods?.picture" style="width: 50%"></el-image>
      <div
          class="first"
          style="
          background-color: #ede3e7;
          display: flex;
          flex-wrap: wrap;
          justify-content: space-between;
          padding-top: 10px;
        "
      >
        <div v-for="i in 6" :key="i">
          <div class="box" @click="handle">
            <el-image
                class="img"
                :src="HomeGoods?.goods[i - 1].picture"
                :fit="contain"
            ></el-image>
            <div class="value">
              <h5>{{ HomeGoods?.goods[i - 1].name }}</h5>
              <p>{{ HomeGoods?.goods[i - 1].desc }}</p>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<style scoped lang="scss">
.a_total {
  font-size: 10px;
  font-weight: normal;
  margin-left: 800px;
  font-family: '小可奶酪体';
  text-decoration: none;
  color: black;
}
.first {
  display: flex;
}
.box {
  position: relative;
  width: 180px;
  height: 260px;
  margin: 0 10px;
  h5 {
    font-family: '素材集市';
    overflow: hidden;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 1;
  }
  p {
    font-size: 10px;
    font-family: '清松';
    overflow: hidden;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 1;
  }
}
.value {
  position: absolute;
  width: 100%;
  top: 185px;
}
.box:hover {
  animation: scale-up-center 0.1s cubic-bezier(0.39, 0.575, 0.565, 1) both;
}

@keyframes scale-up-center {
  0% {
    transform: scale(1);
  }
  100% {
    transform: scale(1.1);
  }
}
</style>